<template>
  <el-dialog
    width="70%"
    title="数据变更详情"
    :visible="dialogVisible"
    append-to-body
    @close="close"
  >
    <div class="crud-group">
      <el-input
        v-model="paramsForm.agentKey"
        type="text"
        placeholder="请输入agent标识"
        clearable
      />
      
      <el-select
        v-model="paramsForm.dataChangeType"
        placeholder="数据变更类型"
        clearable
      >
        <el-option
          v-for="item in stateOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        type="success"
        icon="el-icon-search"
        @click="getData"
      >
        搜索
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-refresh-left"
        @click="resetForm"
      >
        重置
      </el-button>
    </div>
    <el-table
      v-loading="isLoading"
      :data="data"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
    
      <!-- <el-table-column
        prop="mark"
        label="任务日期"
        sortable
      />
    
      <el-table-column
        prop="flag"
        label="标识"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        prop="dbName"
        label="库名"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        prop="tbName"
        label="表名"
        sortable
        show-overflow-tooltip
      /> -->
      <el-table-column
        prop="dbTbName"
        label="库表名"
        sortable
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        prop="hdfsFilePath"
        label="hdfs文件路径"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        prop="nasHdfsFilePath"
        label="Nas hdfs文件路径"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        prop="agentKey"
        label="agent标识"
        sortable
        show-overflow-tooltip
        width="140"
      />

      <el-table-column
        prop="dataChangeType"
        label="数据变更类型"
        sortable
        width="120"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStateColor(scope.row.dataChangeType)"
          >
            {{ getState(scope.row.dataChangeType) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="paramsForm.current"
        :page-size="paramsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="total"
        @size-change="(val)=>{
          paramsForm.current = 1
          paramsForm.size = val
          getData()
        }"
        @current-change="(val)=>{
          paramsForm.current = val
          getData(false)
        }"
      />
    </div>

    <TableDetailsDialog
      :append-to-body="true"
      :dialog-visible="detailsDialogVisible"
      :details="log"
      @close="detailsDialogVisible = false"
    />

    <TableDetailsDialog
      :append-to-body="true"
      :dialog-visible="cbTimeDialogVisible"
      :details="cbTimeData"
      @close="cbTimeDialogVisible = false"
    />
  </el-dialog>
</template>

<script>
import cbApi from '@/api/coldStandby/index'
import TableDetailsDialog from './TableDetailsDialog.vue'
const form = {
  current: 1,
  size: 10,
  agentKey: '',
  dataChangeType: '',
  taskId: '',
  tableId: ''
}

export default {
  components: {TableDetailsDialog},
  props: {
    dialogVisible: Boolean,
    tableId: String,
    taskId: String
  },
  data() {
    return {
      data: [],
      total: 0,
      isLoading: false,
      detailsDialogVisible: false,
      paramsForm: {...form},
      log: '',
      cbTimeDialogVisible: false,
      cbTimeData: '',
      selection: [],
      stateOption: [
        {
          label: '修改',
          value: '1'
        },
        {
          label: '删除',
          value: '2'
        },        
        {
          label: '新增',
          value: '3'
        }
      ],
      tableDetail: ''
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.resetForm()
        this.paramsForm.tableId = this.tableId
        this.paramsForm.taskId = this.taskId
        this.getData()
      }
    }
  },
  methods: {
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.isLoading = true
      cbApi.cbDataChange(this.paramsForm).then(res => {
        this.data = res.records
        this.total = res.total
      }).finally(() => {
        this.isLoading = false
      })
    },
    downloadLog(logPath) {
      cbApi.download({logPath}).then(res => {
        this.log = res
        this.detailsDialogVisible = true
      })
    },
    getStateColor(state) {
      switch (state) {
        case '1':
          return 'warning'
        case '2':
          return 'danger'
        default:
          return ''
      }
    },
    getState(state) {
      switch (state) {
        case '1':
          return '修改'
        case '2':
          return '删除'
        default:
          return '新增'
      }
    },
    reRun() {
      const flag = this.selection[0].flag
      if (this.selection.some((item) => {
        return item.flag !== flag
      })) {
        this.$message.error('不同标志的任务不能同时重跑')
        return
      }
      const idList = this.selection.map(item => item.id)
      const auditId = idList.join()
      const data = {
        auditId,
        flag
      }
      cbApi.rerunCountONE(data)
      setTimeout(() => {
        this.$message.success('重跑开始')
        this.getData()
      }, 500)
    },
    close() {
      this.$emit('close')
    },
    resetForm() {
      this.paramsForm = {...form}
      this.paramsForm.taskId = this.taskId
      this.getData()
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    handleCommand(command) {
      this[command]()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
